import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'
import Article from '@/views/Article.vue'
import Collect from '@/views/Collect.vue'
import Like from '@/views/Like.vue'
import User from '@/views/User.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/article' },
    {
      path: '/home',
      component: Layout,
      // 所有的子路由放到 children 数组中
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User }
      ]
    },
    // 查询参数和路径参数如何取舍？
    // 如果只有一个参数，比如唯一标识（id），用路径参数，地址看上去更简洁
    // 如果有很多个参数需要传，用查询参数，语义化更好
    { name: 'ArticleDetail', path: '/article/detail/:id', component: ArticleDetail }
  ]
})

export default router
